<script setup lang="ts">
import { watch,ref,reactive} from 'vue'
import type { FormInstance } from 'ant-design-vue'
import {actionConfig} from "./roleList"
import type{actionConfigType,actionKeyType} from "./roleList"

const emits = defineEmits(['close'])
const props = defineProps<{
	visible: boolean
  editNode:{[key:string]:any}
}>()


const authState=reactive({
  accessrequestIdList:[] as string[],
	actionList:[] as actionKeyType[]
})
const pageInnerAuthList = ref<any[]>([])
const actionAuthList=ref<actionConfigType[]>(actionConfig)
const formInstance = ref<FormInstance | null>(null)
const formLayout = {
	style: 'margin:10px',
	labelCol: { span: 6 },
	wrapperCol: { span: 18 },
	labelAlign: 'left',
}
const rowFormItemLayout = {
	labelCol: { span: 3 },
	wrapperCol: { span: 21 },
}
const rules = {
	xxx: [{ required: true, message: '请输入xxx！', trigger: 'change' }],
}

function handleOk() {
	const {requestList}=props.editNode
	 const requestListMap:Record<string,requestItem>={}
	 const actionListMap:Record<string,actionConfigType>={}
	 requestList.forEach((v:requestItem)=>{
		 requestListMap[v.id]=v
	 })
	 actionAuthList.value.forEach((v)=>{
		 actionListMap[v.value]=v
	 })
   const accessRequestList:requestItem[]=[]
	 const accessActionList:actionConfigType[]=[]
   authState.accessrequestIdList.forEach(v=>{
		   accessRequestList.push(requestListMap[v])
	 })
	 authState.actionList.forEach(v=>{
		   accessActionList.push(actionListMap[v])
	 })
  emits('close',JSON.parse(JSON.stringify({
		accessRequestList,
    accessActionList,
	})))
}

watch(
	() => props.visible,
	(nv) => {
		if (nv) {
      const {requestList,accessRequestList,accessActionList}=props.editNode
       const _requestList=requestList.map((v:requestItem)=>{
				if(v.needAuth) return {label:`${v.requestName}（${v.description}）`,value:v.id}
				else return {label:`${v.requestName}（${v.description}） —— 无需分配即可访问`,value:v.id,disabled:true}
			 })
			 pageInnerAuthList.value=_requestList
      
       if(accessRequestList && accessRequestList.length) authState.accessrequestIdList=accessRequestList.map((v:requestItem)=>v.id)
       else authState.accessrequestIdList=[] 

			 if(accessActionList && accessActionList.length) authState.actionList=accessActionList.map((v:any)=>v.value)
			 else  authState.actionList=[]
		}
	}
)
</script>

<template>
	<a-modal :visible="visible" title="页面内权限分配" :maskClosable="false" :mask="false" width="60%" @ok="handleOk" @cancel="emits('close')" >
		<a-form :model="authState" :rules="rules" v-bind="formLayout" ref="formInstance" name="role_giveAuth">
			<a-row :gutter="[24, 8]">
				<a-col :span="24">
					<a-form-item name="accessrequestIdList" label="接口权限" v-bind="rowFormItemLayout"  > 
            <a-select mode="multiple" v-model:value="authState.accessrequestIdList" placeholder="请选择页面内可用的接口。后端可根据当前的请求路径和角色具备的接口列表来校验是否具有接口权限" :options="pageInnerAuthList" optionFilterProp="label" allowClear />
          </a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item name="actionList" label="按钮权限" v-bind="rowFormItemLayout"  > 
            <a-select mode="multiple" v-model:value="authState.actionList" placeholder="请选择页面内可执行的动作"  :options="actionAuthList" optionFilterProp="label" allowClear />
          </a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>


